<!-- 供应商对账看板 -->

<script setup>

import PurchaseAmountGaugeChart from "./PurchaseAmountGaugeChart.vue";
import PurchaseNumGaugeChart from "./PurchaseNumGaugeChart.vue";
import PurchaseFinishRateGaugeChart from "./PurchaseFinishRateGaugeChart.vue";
import PurchasePriceChart from "./PurchasePriceChart.vue";
import PurchaseTrendChart from "./PurchaseTrendChart.vue";

import PurchaseRequireProgressChart from "./PurchaseRequireProgressChart.vue";
import PurchaseRequireDepartmentProgressChart from "./PurchaseRequireDepartmentProgressChart.vue";
import PurchaseProductAmountChart from "./PurchaseProductAmountChart.vue";
import PurchaseMaterialAmountChart from "./PurchaseMaterialAmountChart.vue";
import PurchaseInAmountChart from "./PurchaseInAmountChart.vue";

import Table from './Table.vue'
import SupplierRate from "./SupplierRate.vue";
import PurchaseProductFinishRateChart from "./PurchaseProductFinishRateChart.vue";
import PurchaseMaterialFinishRateChart from "./PurchaseMaterialFinishRateChart.vue";


</script>

<template>
  <div class="head">
    <h1>采购管理可视化看板</h1>
  </div>

  <div class="board-row">

    <PurchaseAmountGaugeChart></PurchaseAmountGaugeChart>
    <PurchaseNumGaugeChart></PurchaseNumGaugeChart>
    <PurchaseFinishRateGaugeChart></PurchaseFinishRateGaugeChart>

    <PurchasePriceChart style="flex: 3;"></PurchasePriceChart>

  </div>

  <div class="board-row">
    <PurchaseTrendChart></PurchaseTrendChart>
    <PurchaseProductAmountChart></PurchaseProductAmountChart>
    <PurchaseMaterialAmountChart></PurchaseMaterialAmountChart>
  </div>

  <div class="board-row">
    <PurchaseInAmountChart style="flex: 2"></PurchaseInAmountChart>
    <SupplierRate style="flex: 2"></SupplierRate>
    <PurchaseProductFinishRateChart></PurchaseProductFinishRateChart>
    <PurchaseMaterialFinishRateChart></PurchaseMaterialFinishRateChart>
  </div>



</template>

<style scoped>
.board-row {
  display: flex;
  gap: 1em;
  padding: 1em;
}

.board-row>div {
  flex: 1;
}


.vitas-data {
  border-radius: 50%;
  border: 3px solid #49bcf7;
  display: block;
  width: 10em;
  height: 10em;
  justify-content: center;
  align-items: center;
}

.vitas-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #ffffff;
}

.boxall {
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.evenRow {
  background: #0C385E !important;
}
.oddRow{
  background:#062340 !important;
}


.selectOption{
  .el-input__wrapper{
    background-color: 	rgba(15,112,169,0.5) !important;
    border-radius: 50px;
    box-shadow: 0 0 0 0;
    padding: 0;
    border: 1px solid #0F70A9;
    width: 118px;
  }
  .el-input__inner {
    padding-left: 15px;
    line-height: 32px;
    font-size: 16px;
    color: #02D9FD;
  }
  .el-input__suffix{
    padding-right: 15px;
  }
  .el-select .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 0 !important;
  }
  .el-select .el-input.is-focus .el-input__wrapper{
    box-shadow: 0 0 0 0 !important;
  }
}
</style>